<template>
  <div class="profile-task">
    <div class="header">
      <div class="nav-outer no-scrollbar">
        <div class="nav">
          <div
            class="nav-item text-ellipsis-1"
            :class="navActiveIndex == index ? 'active' : ''"
            v-for="(item, index) in navList"
            :key="item.id"
            @click="onClickNavItem(index)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <a-button type="primary" @click="onClickPublishBtn">{{
        $t("btnText.publish_task")
      }}</a-button>
    </div>
    <div class="pc-data">
      <div class="table">
        <div class="table-header">
          <div class="table-header-item col-1">
            {{ $t("table.profile_task.col_1") }}
          </div>
          <div class="table-header-item col-2">
            {{ $t("table.profile_task.col_2") }}
          </div>
          <div class="table-header-item flex-1">
            {{ $t("table.profile_task.col_3") }}
          </div>
          <div class="table-header-item col-4">
            {{ $t("table.profile_task.col_4") }}
          </div>
          <div class="table-header-item col-5">
            {{ $t("table.profile_task.col_5") }}
          </div>
          <div class="table-header-item col-6">
            {{ $t("table.profile_task.col_6") }}
          </div>
          <div class="table-header-item col-7">
            {{ $t("table.profile_task.col_7") }}
          </div>
        </div>
        <div class="table-body" v-if="TaskData">
          <template v-for="item in TaskData.data" :key="item.id">
            <div class="table-row">
              <div class="table-row-item col-1">{{ item.task_no }}</div>
              <div class="table-row-item col-2">
                {{ item.member_last_name + ' ' + item.member_first_name }}
              </div>
              <div class="table-row-item flex-1">
                {{ item.title }}
              </div>
              <div class="table-row-item col-4">{{ item.create_time }}</div>
              <div class="table-row-item col-5">
                {{ item.receive_last_name +' '+ item.receive_first_name }}
              </div>
              <div class="table-row-item status col-6">
                <span
                  :class="
                    item.status == '1'
                      ? 'pre-pay'
                      : item.status == '3'
                      ? 'payed'
                      : item.status == '4'
                      ? 'complete'
                      : 'pre-pay'
                  "
                  >{{ item.status_title }}</span
                >
              </div>
              <div class="table-row-item col-7 table-row-col-end">
                <div class="btn" @click="getTaskDetailData(item.id)">
                  <IconDetail />
                  <span>{{ $t("btnText.detail") }}</span>
                </div>
                <template v-if="item.status == 3 || item.status == 4">
                  <span>|</span>
                  <div class="btn" @click="followUpBtn(item)">
                    <IconFollowUp />
                    <span>{{
                      item.receive_id == memberStore.profile?.id
                        ? $t("btnText.follow_up")
                        : $t("btnText.replay")
                    }}</span>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
        <template v-else>
          <div class="pc-skeleton">
            <Skeleton height="30px" block v-for="i in 8" :key="i"></Skeleton>
          </div>
        </template>
      </div>
    </div>
    <div class="mobile-data">
      <div class="add-new-task">
        <IconCirclePlus
          @click="onClickPublishBtn"
          class="svg-icon"
          fill="var(--yd-primary-color)"
        >
        </IconCirclePlus>
      </div>
      <div class="mobile-task-list" v-if="TaskData">
        <div
          class="mobile-task-item"
          v-for="item in TaskData.data"
          :key="item.id"
        >
          <div class="task-header">
            <div class="title">
              {{ item.title }}
            </div>
            <div class="status">
              <span
                :class="
                  item.status == '1'
                    ? 'pre-pay'
                    : item.status == '3'
                    ? 'payed'
                    : item.status == '4'
                    ? 'complete'
                    : 'pre-pay'
                "
                >{{ item.status_title }}</span
              >
            </div>
          </div>
          <div class="detail">
            <div class="publisher">
              <div class="label">{{ $t("table.profile_task.col_2") }}</div>
              <div class="value">
                {{ item.member_last_name + ' ' + item.member_first_name }}
              </div>
            </div>
            <div class="receiver">
              <div class="label">{{ $t("table.profile_task.col_5") }}</div>
              <div class="value">
                {{ item.receive_last_name +' '+ item.receive_first_name }}
              </div>
            </div>
            <div class="time">
              <div class="label">{{ $t("table.profile_task.col_4") }}</div>
              <div class="value">
                {{ item.create_time.split(" ")[0] }}
              </div>
            </div>
          </div>
          <div class="divider-line"></div>
          <div class="footer">
            <div class="btn" @click="getTaskDetailData(item.id)">
              <IconDetail />
              <span>{{ $t("btnText.detail") }}</span>
            </div>
            <span v-if="true" style="visibility: hidden" class="split">|</span>
            <div class="btn" @click="followUpBtn(item)">
              <IconFollowUp />
              <span>{{ $t("btnText.follow_up") }}</span>
            </div>
          </div>
        </div>
      </div>
      <template v-else>
        <div class="mobile-skeleton">
          <div class="mobile-skeleton-inner">
            <div class="mobile_inner" v-for="i in 4" :key="i">
              <Skeleton width="40%" mobile></Skeleton>
              <Skeleton :rows="2" mobile></Skeleton>
              <div class="footer_btns">
                <Skeleton width="100%" mobile></Skeleton>
                <Skeleton width="100%" mobile></Skeleton>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <!-- 任务详情 -->
    <DialogTaskDetail ref="dialogTaskDetailRef" :id="task_id" />
    <!-- 任务填写表单 -->
    <DialogTaskFill
      ref="dialogTaskFillRef"
      :type="dialogTaskFillType"
      :id="task_id"
      :task_title="task_title"
      @complete="dialogTaskFillComplete"
    />
    <!-- 任务跟进记录 -->
    <DialogTaskFollowUp
      ref="dialogTaskFollowUp"
      :id="task_id"
      :task_title="task_title"
    />
    <!-- 更新个人姓名 -->
    <FormModalMemberUpdateNickname ref="formModalMemberUpdateNickname" />
  </div>
</template>

<script setup lang="ts">
import { Modal, message } from "ant-design-vue";
import {
  h,
  onBeforeMount,
  nextTick,
  ref,
  watch,
  getCurrentInstance,
  onMounted,
} from "vue";
import {
  postCreateTask,
  postMemberTaskList,
  postTaskCommentList,
  postTaskCommentReplay,
  postTaskDetail,
  postTaskFollowUpList,
} from "../../../api/task";
import { postUploadSingleImg } from "../../../api/api";
import type { PageResult } from "../../../types/global";
import type { TaskCreateParams, TaskItem } from "../../../types/task";
import { RegLink } from "../../../data/reg";
import { useMemberStore } from "../../../store";

const memberStore = useMemberStore();

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const navActiveIndex = ref(0);
const navList = ref([
  {
    id: 1,
    label: "待审",
  },
  {
    id: 2,
    label: "已审核",
  },
  {
    id: 3,
    label: "抢单申请",
  },
  {
    id: 4,
    label: "系统分配",
  },
  {
    id: 5,
    label: "已完成",
  },
]);

onBeforeMount(() => {
  setTimeout(() => {
    setNavList();
  });
});

const setNavList = () => {
  navList.value[0].label = $t("content.profile.task.navList.label_1");
  navList.value[1].label = $t("content.profile.task.navList.label_2");
  navList.value[2].label = $t("content.profile.task.navList.label_3");
  navList.value[3].label = $t("content.profile.task.navList.label_4");
  navList.value[4].label = $t("content.profile.task.navList.label_5");
};

const onClickNavItem = (index: number) => {
  navActiveIndex.value = index;
  task_id.value = "";
};

watch(navActiveIndex, (n) => {
  getProfileTaskData();
});

const TaskData = ref<PageResult<TaskItem[]>>();
const getProfileTaskData = async () => {
  TaskData.value = undefined;
  let status = navList.value[navActiveIndex.value].id;
  let res = await postMemberTaskList(status);
  if (res.code === 200) {
    TaskData.value = res.data;
  }
};

onBeforeMount(() => {
  getProfileTaskData();
});

// =============任务详情 =================
const dialogTaskDetailRef = ref();
const getTaskDetailData = async (id: number) => {
  if (isMobile()) {
    goto("/mobile_detail/task", { id });
    return;
  }
  task_id.value = id;
  nextTick(() => {
    dialogTaskDetailRef.value.showDialog();
  });
};

const dialogTaskFillType = ref("publish");
const dialogTaskFillRef = ref();
const dialogTaskFollowUp = ref();
const task_id = ref();
const task_title = ref("");
// 发布任务

const formModalMemberUpdateNickname = ref();
const onClickPublishBtn = () => {
  const { profile } = memberStore;
  let last_name = profile?.last_name;
  let first_name = profile?.first_name;
  if (!last_name || !first_name) {
    message.warning($t("message.perfect_information"));
    if (isMobile()) goto("/mobile/updateName");
    else formModalMemberUpdateNickname.value.show();
    return;
  }
  if (isMobile()) {
    goto("/mobile/publishTask");
  } else {
    dialogTaskFillType.value = "publish";
    task_title.value = "";
    nextTick(() => {
      dialogTaskFillRef.value.showDialog();
    });
  }
};

const followData = ref();
const followUpBtn = async (item: TaskItem) => {
  if (item.status == 1)
    return message.warning($t("message.task_follow_error.pre_audit"));
  if (item.status == 2)
    return message.warning($t("message.task_follow_error.published"));
  dialogTaskFillType.value = "follow";
  task_title.value = item.title;
  let id = item.id;
  // 任务跟进记录-弹窗
  if (task_id.value == id && followData.value?.length > 0) {
    if (isMobile()) {
      sessionStorage.setItem("taskDetailData", JSON.stringify(item));
      goto("/mobile/followUp");
      return;
    }
    dialogTaskFollowUp.value.showDialog();
    return;
  }
  task_id.value = id;
  let res = await postTaskFollowUpList(id);
  followData.value = res.data;
  // 记录为0 弹窗第一次跟进弹窗 否则直接弹窗更近记录弹窗
  if (res.data.length == 0) {
    // 发布者-没数据提示等待接单者跟进记录
    if (item.status == 3 && memberStore.profile?.id == item.member_id)
      return message.warning($t("message.task_follow_error.received"));
    if (isMobile()) {
      sessionStorage.setItem("taskDetailData", JSON.stringify(item));
      goto("/mobile/publishTask", { type: dialogTaskFillType.value });
      return;
    }
    // 接单者-弹窗跟进
    nextTick(() => {
      dialogTaskFillRef.value.showDialog();
    });
    return;
  }
  // 跟进记录弹窗
  if (isMobile()) {
    sessionStorage.setItem("taskDetailData", JSON.stringify(item));
    goto("/mobile/followUp");
    return;
  }
  nextTick(() => {
    dialogTaskFollowUp.value.showDialog();
  });
};

const dialogTaskFillComplete = () => {
  if (dialogTaskFillType.value == "publish") {
    getProfileTaskData();
  }
  if (dialogTaskFillType.value == "follow") {
    task_id.value = "";
  }
};
</script>

<style lang="less">
.profile-confirm-modal {
  .ant-modal-content {
    .ant-modal-close {
      width: 22px;
      height: 22px;
      top: 24px;
      right: 24px;
      border-radius: 0;
      svg {
        width: 22px;
        height: 22px;
      }
    }
    .ant-modal-header {
      margin-bottom: 8px;
      .ant-modal-title {
        font-size: 18px;
        color: #172026;
      }
    }
    .ant-form {
      .ant-form-item-label {
        width: 100px;
      }
      .ant-input {
        height: 40px;
        padding: 10px 8px;
        font-size: 14px;
        color: #36434d;
      }
    }
  }
  .form-file-item {
    .ant-form-item-control {
      justify-content: center;
    }
  }
}
// .profile-confirm-modal {
//   .ant-modal-content {
//     border-radius: 16px !important;
//   }
//   .ant-modal-confirm-title {
//     font-weight: 500 !important;
//     font-size: 18px !important;
//   }
//   .ant-modal-confirm-content {
//     font-size: 14px !important;
//     color: #36434d !important;
//     margin-top: 8px !important;
//   }
//   .ant-modal-confirm-btns {
//     display: flex;
//     justify-content: flex-end;
//     gap: 12px;
//     margin-top: 24px;
//     .ant-btn {
//       height: 40px !important;
//       border-radius: 10px !important;
//       font-size: 14px !important;
//     }
//   }
// }
.header {
  gap: 30px;
  .nav-outer {
    display: flex;
    align-items: center;
    flex: 1;
    overflow-x: scroll;
  }
}
</style>
<style scoped lang="less">
@import url("./common.less");
.pc-skeleton {
  display: flex;
  flex-direction: column;
  & > div {
    margin-top: 30px;
  }
}
.mobile-skeleton {
  .mobile-skeleton-inner {
    display: flex;
    flex-direction: column;
    gap: 123px;
  }
  .mobile_inner {
    display: flex;
    flex-direction: column;
    gap: 61px;
    .footer_btns {
      display: flex;
      gap: 61px;
    }
  }
}

.header {
  display: flex;
  justify-content: space-between;
  .nav {
    height: 25px;
  }
  .ant-btn {
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }
}
.mobile-data {
  display: none;
}

@media screen and (max-width: 768px) {
  .mobile-data {
    display: block;
    .add-new-task {
      position: fixed;
      bottom: 300px;
      right: 200px;
      z-index: 9;
      // background-color: #fff;
      border-radius: 50%;
      .svg-icon {
        width: 200px;
        height: 200px;
      }
    }
  }
  .pc-data {
    display: none;
  }
  .header {
    margin-bottom: 123px;
    .nav {
      height: auto;
      padding: 0 62px;
    }
    .ant-btn {
      display: none;
      height: 205px !important;
      padding: 51px 123px !important;
      border-radius: 61px !important;
      font-size: 72px !important;
    }
  }
}
</style>
